﻿@namespace BlazorDemo.Pages.CaseViews
@inherits DemoWithResizableComponent

<div class="demo-description">
    <h2><DemoNavLink Link="TimeEdit#Overview" />Overview</h2>
    <p>
        As its name implies, our Blazor <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTimeEdit-1">Time Edit</a> allows users to modify time values via its time editor or its drop-down time picker.
        A user can enter time values into the text box or select time values via its drop-down window.
        To specify time values in code, use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTimeEdit-1.Time">Time</a> property.
    </p>
    <p>
        The Time Edit component supports different size modes. To specify the component's size in code, use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.Base.DxResizableEditorBase-2.SizeMode">SizeMode</a> property. To apply different size modes in this demo, use the drop-down list in the demo card's header.
    </p>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode">
            <TitleTemplate>
                Time: <b>@TimeValue.ToString(@"hh\:mm\:ss")</b>
            </TitleTemplate>
        </DemoToolbar>
    </div>
    <div class="card-body mw-480">
        <DxTimeEdit @bind-Time="@TimeValue" SizeMode="SizeMode"></DxTimeEdit>
    </div>
</div>

<CodeSnippet_Editor_TimeEdit />

@code {
    TimeSpan TimeValue { get; set; } = DateTime.Now.TimeOfDay;
}
